import React from 'react'
import { WingBlank ,WhiteSpace,Card} from 'antd-mobile';
import PropTypes from 'prop-types'
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'
@withRouter
@connect(
    state=>state
)
class UserCard extends React.Component{
    static propTypes={
        userlist:PropTypes.array.isRequired
    }
    handleClick(v){
        this.props.history.push(`/chat/${v._id}`)
    }
    render(){
        const Header=Card.Header
        const Body=Card.Body
        // console.log(this.props.userlist);
        
        return(
            <WingBlank >
                {this.props.userlist.map(v=>(
                    v.avatar?
                    <Card style={{marginTop:'10px'}}
                        key={v._id}
                        onClick={()=>this.handleClick(v)}
                        >
                        <Header
                            title={v.user}
                            thumb={require(`../img/${v.avatar}.png`)}
                            extra={<span>{v.title}</span>}
                        ></Header>
                        <Body>
                            {v.type=='boss'?<div>公司: {v.company}</div>:null}
                            <WhiteSpace></WhiteSpace>
                            {v.desc.split('\n').map((v,index)=>(
                                <div key={index}>{v}<WhiteSpace></WhiteSpace></div>
                            ))}
                            {v.type=='boss'?<div>薪资: {v.money}</div>:null}
                        </Body>
                    </Card>
                    :null
                ))}
            </WingBlank>
        )
    }
}
export default UserCard